<template>
    <!-- 利润管理 -->
    <div class="ticketsList">
        <serchForm :Form="financeForm" :FormLabel="financeFormLabel" @onSearch="onSearch" />
        <el-button class="visitBtn" @click="visitFn" v-if="checkPermi(['system:order:edit'])"><i
                class="iconfont icon-daochu"></i>
            导出
        </el-button>
        <div style="margin-top: 20px  ;">
            <label v-if="!showAll"> 订单总金额：<span style="color: rgb(21, 236, 50);">{{ totalAmount.toFixed(2) }} </span>
                元</label>
            <label v-else> 勾选总金额：<span style="color: rgb(21, 236, 50);">{{ totalOrderAmount.toFixed(2) }} </span> 元</label>
        </div>

        <forTableCom :color="color" :idActive="idActive" :bg="bg" :total="totals" :page="pageNum" :limit="pageSize"
            @handleSelectionChange="handleSelectionChange" @handleChange="handleChange" @updatePage="updatePage"
            @updateLimit="updateLimit" :tableHeaderData="financeTableHeaderData" :tableData="financeTableData"
            @tableDetail="tableDetail" :profitUpdate="true" @genxinList="genxinList">
        </forTableCom>
        <PopUps v-if="uptatePop" widthMy='60%'  height-my="78%">
            <!-- 修改弹窗 -->
            <OrderUpdate @closeUptatePop="closeUptatePop" :rowDataUpdate="rowDataUpdate" :updataFlag="false"
                OrderUpdateTitle="订单详情"></OrderUpdate>
        </PopUps>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import { getselectOrderApi ,selectOrderAllApi} from '@/api/tickets/index.js'
import { checkPermi } from "@/utils/permission.js";
import PopUps from '@/components/My/PopUps/index.vue'
import OrderUpdate from '@/components/My/OrderUpdate/index.vue'
import dayjs from 'dayjs'

const { proxy } = getCurrentInstance()

let showAll = ref(false)
let color = ref('#333')
let bg = ref('#d9d9d93b')
let uptatePop = ref(false)
let totalOrderAmount = ref(0)
let totalAmount = ref(0)
// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 勾选激活行的背景色
const idActive = 'orderId'
// 存储勾选框的对象
let multipleSelection = ref([])
// 表单
let financeForm = ref(
    {
        orderDate: '',
        orderId: '',
        customerId: '',
        customerStore: '',
        creator: '',
        deptId: '',
    }
)
// 表单数据标题
let financeFormLabel = ref([
    {
        name: 'orderDate',
        label: '单据日期',
        type: 'datetimerange'
    },
    {
        name: 'orderId',
        label: '单据编号',
    },
    {
        name: 'invoiceStatus',
        label: '单据状态'
    },
    {
        name: 'customerId',
        label: '客户名称',
        type: 'customer'
    },
    {
        name: 'customerStore',
        label: '终端门店'
    },
    {
        name: 'creator',
        label: '制单人'
    },
    {
        name: 'deptId',
        label: '部门',
        type: "department"
    },
])

// 表格表头数据
let financeTableHeaderData = ref([

    {
        prop: 'orderDate',
        label: '单据日期',
        width: 190
    },

    {
        prop: 'orderId',
        label: '单据编号',
        width: 170
    },
  {
    prop: 'costingId',
    label: '核算编号',
    width: 130

  },
    {
        prop: 'invoiceStatus',
        label: '单据状态',
        minwidth: 100
    },

    {
        prop: 'customerName',
        label: '客户名称',
        width: 150
    },
    {
        prop: 'deptName',
        label: '部门'
    },
    {
        prop: 'customerStore',
        label: '终端门店',
        width: 150

    },
    {
        prop: 'totalOrderAmount',
        label: '订单总金额',
        width: 150
    },
    {
        prop: 'materialFeeTotal',
        label: '材料费合计',
        width: 150
    },
    {
        prop: 'installationFeeTotal',
        label: '工费合计',
        width: 150

    },
    {
        prop: 'urbanManagementFee',
        label: '城管费合计',
        width: 150
    }, {
        prop: 'contractAmount',
        label: '合同金额',
        width: 150
    },

    {
        prop: 'commission',
        label: '提成%'
    },
    {
        prop: 'tax',
        label: '税点'
    }, {
        prop: 'totalCost',
        label: '成本合计',
          width: 100
    }, {
        prop: 'grossProfit',
        label: '毛利润'
    }, {
        prop: 'moneyGross',
        label: '毛利率'
    },
    {
        prop: 'budgetCost',
        label: '预算成本',
          width: 100

    }, {
        prop: 'actualCost',
        label: '实际成本',
          width: 100

    },

])

// 表格数据内容
let financeTableData = ref([

])

let rowDataUpdate = reactive()
// 详情双击行
const tableDetail = (props) => {
    rowDataUpdate = props
    uptatePop.value = true
}
const closeUptatePop = (v) => {
    uptatePop.value = v
}
// 接口
const getselectOrderData = async (data) => {
    let data1 = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    }
    let params = Object.assign(data1, data)
    let { code, rows, total } = await getselectOrderApi(params)
    if (code == 200) {
        financeTableData.value = rows
        totals.value = total
        params.pageNum = null
        params.pageSize = null
        totalAmount.value = await selectOrderAllApi(params)
    }
}

const genxinList = ()=>{
    orderDateLte.value = v.orderDate[0]?v.orderDate[0]:null
    orderDateGte.value = v.orderDate[1]?dayjs(v.orderDate[1]).subtract(1,'second').format('YYYY-MM-DD HH:mm:ss'):null
    let params = {
        orderDateLte: orderDateLte.value,
        orderDateGte: orderDateGte.value,
        ...searchData.value
    }
    params.orderDate = null
    getselectOrderData(params)
}
// 选中的列

const handleSelectionChange = (v) => {
    multipleSelection.value = v
  let sum = 0
  v.forEach(item => {
    sum += Number(item.totalOrderAmount)
  })
  totalOrderAmount.value = sum

  if (v.length > 0) {
    showAll.value = true
  } else {
    showAll.value = false
  }
}
let orderDateLte = ref(null)
let orderDateGte = ref(null)
let searchData = ref(null)
// 查找suppliersName
const onSearch = (v) => {
    orderDateLte.value = v.orderDate[0]?v.orderDate[0]:null
    orderDateGte.value = v.orderDate[1]?dayjs(v.orderDate[1]).subtract(1,'second').format('YYYY-MM-DD HH:mm:ss'):null
    let params = {
        orderDateLte: orderDateLte.value,
        orderDateGte: orderDateGte.value,
        ...v
    }
    params.orderDate = null
    pageNum.value = 1
    searchData.value = v
    getselectOrderData(params)
}
// 分页器大小  当前分页器
const handleChange = (v) => {
    let { page, limit } = v.page
    let params = {
        ...searchData.value,
        orderDateLte: orderDateLte.value,
        orderDateGte: orderDateGte.value,
    }
    params.orderDate = null
    pageNum.value = page
    pageSize.value = limit

    // let params = financeForm.value
    getselectOrderData(params)
  
}


// 导出
const visitFn = () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: 10000,
        orderDateLte: orderDateLte.value,
        orderDateGte: orderDateGte.value,
        ...searchData.value
    }
    params.orderDate = null
    /** 导出按钮操作 */
    proxy.download("system/work/export", {
        ...params,
    }, `config_${new Date().getTime()}.xlsx`);
}
// 表单数据
onMounted(() => {
    getselectOrderData()
})

</script>

<style scoped lang="scss">
.ticketsList {
    padding: 16px;

}
</style>